<template>
	<view class="container box">
		<uni-popup ref="share" type="dialog">
			<view class="share-box">
				你已完成<label class="calorie">{{sport.name}}</label>训练<br>共<label
					class="calorie">{{Math.floor(counttime/60)}}</label>分钟<label
					class="calorie">{{counttime%60}}</label>秒<br>，消耗了<label class="calorie">{{allConsume}}</label>千卡
				<view class="share-btns">
					<view class="share-cancel share-btn" @click="cancelshareFn">
						取消分享
					</view>
					<view class="share-confirm share-btn" @click="shareFn">
						分享
					</view>
				</view>
			</view>
		</uni-popup>
		<view class="head inner-center" v-if="sport.id">
			<span class="text-normal" style="letter-spacing: 10rpx;">{{sport.name}}</span>
		</view>
		<view class="all-time inner-center">
			{{allTime}}
			<view class="text-normal">
				总时长
			</view>
		</view>
		<view class="all-consume  inner-center">
			{{allConsume}}<label style="margin-left: 10rpx;letter-spacing: 4rpx;">千卡</label>
			<view class="text-normal">
				总消耗
			</view>
		</view>

		<view class="btn-start  inner-center">
			<image v-if="isstop ||!isstart"
				src="https://mp-ae8470f8-f547-41b1-b360-006dd10063b9.cdn.bspapp.com/set/start.png" mode="widthFix"
				class="icon" @click="train"></image>
			<image v-if="isstart&&!isstop"
				src="https://mp-ae8470f8-f547-41b1-b360-006dd10063b9.cdn.bspapp.com/set/pause.png" mode="widthFix"
				class="icon" @click="pause"></image>
			<image v-if="isstart&&!isstop"
				src="https://mp-ae8470f8-f547-41b1-b360-006dd10063b9.cdn.bspapp.com/set/end.png" mode="widthFix"
				class="icon" @click="end"></image>
		</view>
	</view>
</template>

<script>
	import {
		acquireData,
		addData
	} from '../../../database/index.js'
	export default {
		async onPullDownRefresh() {
			this.start = 0
			this.interval = ''
			this.isstart = false
			this.isstop = false
			this.counttime = 0
			this.sport = {
				id: '',
				name: '',
				calorie: ''
			}
			let datas = await acquireData('sport', {
				_id: param.id
			})
			this.sport.name = datas[0].sport_name
			this.sport.id = datas[0]._id
			this.sport.calorie = datas[0].sport_calorie
			uni.stopPullDownRefresh()
		},
		async onLoad(param) {
			let datas = await acquireData('sport', {
				_id: param.id
			})
			this.sport.name = datas[0].sport_name
			this.sport.id = datas[0]._id
			this.sport.calorie = datas[0].sport_calorie
		},
		data() {
			return {
				start: 0,
				interval: '',
				isstart: false,
				isstop: false,
				counttime: 0,
				sport: {
					id: '',
					name: '',
					calorie: ''
				}
			}
		},

		computed: {
			allConsume: function() {
				let num = (this.counttime / 60).toFixed(2)
				return Math.round(this.sport.calorie * num)
			},
			allTime: function() {
				return this.formatTime(this.counttime)
			}
		},
		methods: {
			async clear() {
				clearInterval(this.interval)
				this.start = 0
				this.interval = ''
				this.isstart = false
				this.isstop = false
				this.counttime = 0
			},
			async cancelshareFn() {
				this.$refs.share.close()
				this.$go2Page('sport')
			},
			async shareFn() {
				let [isadd, addmsg] = await addData('dynamic', {
					uploadTime: new Date().getTime(),
					publisher: this.$store.getters.getToken,
					label: 0,
					contentTxt: `我已在小程序上已完成${this.sport.name}，共计${Math.floor(this.counttime/60)}分${Math.floor(this.counttime%60)}秒，消耗了${this.allConsume}千卡`
				})
				if (isadd) {
					this.$refs.share.close()
					getApp().globalData.param = this.$store.getters.getToken
					uni.switchTab({
						url: `/pages/community/community`
					})
					this.$showMsg('分享成功')
				} else {
					this.$showMsg('分享失败')
				}
			},
			formatTime(seconds) {
				const hours = Math.floor(seconds / 3600);
				const minutes = Math.floor((seconds % 3600) / 60);
				const second = seconds % 60;

				return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${second.toString().padStart(2, '0')}`;
			},
			train() {
				if (!this.isstop) {
					this.start = new Date()
				}
				this.isstop = false
				this.isstart = true
				let self = this
				this.interval = setInterval(function() {
					self.counttime += 1
				}, 1000)
			},
			pause() {
				clearInterval(this.interval)
				this.isstop = true
				this.isstart = false
			},
			async end() {
				if (this.isstop) {
					return
				}
				let self = this
				await uni.showModal({
					title: '提示',
					content: '是否确定结束本次运动',
					success: async function(res) {
						if (res.confirm) {
							clearInterval(self.interval)
							if (self.counttime < 60) {
								self.$showMsg('计时不足1分钟，不作记录')
								self.clear()
							} else {
								let num = (self.counttime / 60).toFixed(2)
								let [res, msg] = await addData('sportTrain', {
									train_calorie: Math.round(self.sport.calorie * num),
									train_start: self.start,
									train_duration: self.counttime,
									train_id: self.sport.id,
									user_id: self.$store.getters.getToken
								})
								if (res) {
									self.$refs.share.open()
								}
							}
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import url('../../../static/styles/common.scss');
	$normalFontSize: 1rem;
	$cardW: 500rpx;

	.share-box {
		border-radius: 10rpx;
		color: black;
		text-align: center;
		padding: 40rpx;
		padding-bottom: 100rpx;
		width: $cardW;
		line-height: 1.8rem;
		background-color: white;
		letter-spacing: 0.1rem;
		position: relative;

		.share-btns {
			border-top: 1px solid #8e8e8e;
			width: $cardW;
			bottom: 10rpx;
			box-sizing: border-box;
			position: absolute;
			display: flex;
			justify-content: space-between;

			.share-btn {
				padding: 10rpx 50rpx;
			}

			.share-cancel {
				padding-right: 80rpx;
				border-right: 1px solid #8e8e8e;
				position: relative;
				color: $global_text;
			}

			.share-confirm {
				color: #4682B4;
			}

		}

		.calorie {
			letter-spacing: 0;
			color: #4169E1;
			font-weight: 600;
		}
	}

	.box {
		position: relative;
		padding-top: 0;
		background-color: #4b3e76;
		color: white;

		.head {
			font-size: 1rem;
			font-weight: 500;
		}

		.all-time {
			margin-top: 80rpx;
			font-weight: 600;
			font-size: 3rem;
		}

		.all-consume {
			margin-top: 300rpx;
		}

		.btn-start {
			margin-top: 200rpx;

		}
	}

	.text-normal {
		letter-spacing: 8rpx;
		font-weight: 400;
		font-size: $normalFontSize;
	}

	.icon {
		width: 80rpx;
		margin-right: 50rpx;

		&:last-child {
			margin-right: 0;
		}
	}
</style>